<template>
  <div :style="`background-image: url('${imgback}'); background-size: cover;`">
    <!-- 顶部 -->
    <div class="top">
      <div class="top_content" style="background-color: #4cc860">
	   <span class="top_logo">
       <router-link to="/index">
         					<img src="../../assets/img/logonews.png" style="width: 240px;height: 90px"/>
       </router-link>
				</span>

        <div class="searchcontainer">
          <input type="text" placeholder="搜索新闻（请输入关键字）" v-model="query" class="search">
          <button class="btnsearch" @click="queryNews()">搜索</button>
        </div>


        <div class="user" >
          <router-link :to="{path:'/userlogin',query:{id:id}}" v-if="userToken==null">
            <button type="submit" class="login">登录</button>
          </router-link>
          <router-link to="/userCenter" v-else>
            <span >
              <img :src="servePath+imgUrl" class="login" style="top: 10px;width: 70px;height: 70px;border-radius: 50%;border: coral dashed 2px" >
            </span>
          </router-link>
        </div>

        <router-link to="/createNews">
          <button type="submit" class="crateNews">发布作品➕</button>
        </router-link>
      </div>
    </div>

<!--左边侧边栏--左边侧边栏--左边侧边栏--左边侧边栏--左边侧边栏--左边侧边栏--左边侧边栏--左边侧边栏--左边侧边栏--左边侧边栏--左边侧边栏--左边侧边栏-->
    <div style="background-color: #D6D1B2;
        width: 60px;
        height: 100vh;
        position: fixed;
        left: -2px;
        ">
      <div style="width: 60px;height: 30px;margin-top: 100px;margin-bottom: 60px;text-align: center" @click="drawer = true">
        <div @click="findComments()">
        <span v-if="pl"><!--没有评论-->
              <img  src="https://img.qinxue365.com/uploads/allimg/1906/4093-1Z605142F0409.png" width="30px" height="30px"/>
        </span>
        <span v-else><!--已经评论-->
               <img  src="https://pic1.zhimg.com/v2-d54e3b85d7b363fa583d4e8aa5ab8070_xs.jpg?source=1940ef5c" width="30px" height="30px"/>
        </span>
        <el-badge :value="plNum" class="item">
          <el-button size="small" label="rtl"  >评论</el-button>
        </el-badge>
        </div>
      </div>



      <!--点赞-->
      <div style="width: 60px;height: 30px;;margin-bottom: 60px;text-align: center" @click="clickdz()">
        <span v-if="dz"><!--没有点赞-->
         <img  src="https://www.emojiall.com/images/240/telegram/1f44d.gif" width="30px" height="30px"/>
          <el-badge :value="dzNum" class="item">
          <el-button size="small" label="rtl" >去点赞</el-button>
        </el-badge>
        </span>
        <span v-else><!--已经点赞-->
         <img  src="https://www.emojiall.com/images/240/skype/1f44d.png" width="30px" height="30px"/>
          <el-badge :value="dzNum" class="item">
          <el-button size="small" label="rtl" >已点赞</el-button>
        </el-badge>
        </span>

      </div>



      <div style="width: 60px;height: 30px;;margin-bottom: 60px;text-align: center" @click="clicksc()">
        <span v-if="sc"><!--没有收藏-->
         <img  src="https://img2.baidu.com/it/u=1866285648,4004087519&fm=253&fmt=auto&app=138&f=JPEG?w=159&h=159" width="30px" height="30px"/>
         <el-badge :value="scNum" class="item">
          <el-button size="small" label="rtl" >去收藏</el-button>
        </el-badge>
        </span>
        <span v-else><!--已经收藏-->
          <img  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201801%2F16%2F20180116170933_lntyd.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1697535398&t=756a67bfd7561d0c195a7f8b6c0fd8dd" width="30px" height="30px"/>
         <el-badge :value="scNum" class="item">
          <el-button size="small" label="rtl" >已收藏</el-button>
        </el-badge>
        </span>

      </div>

      <div style="width: 60px;height: 30px;;margin-bottom: 100px;text-align: center" >

        <el-button type="success" icon="el-icon-arrow-up" circle @click="changBack(1)"></el-button>
        <span ><!--没有收藏-->
         <img  src="../../assets/img/huanback.png" width="60px" height="30px" @click="changBack(1000)"/>
        </span>
        <el-button type="success" icon="el-icon-arrow-down" circle @click="changBack(-1)"></el-button>
      </div>


      <div style="width: 60px;height: 30px;;margin-bottom: 60px;text-align: center" >
        <span ><!--字体颜色-->
          <input type="color" v-model="selectedColor" @input="handleColorSelection">
         <img  src="../../assets/img/huanfont.png" width="60px" height="30px"  v-model="selectedColor" @input="handleColorSelection"/>
        </span>
      </div>



    </div>




    <el-drawer
        title="评论区(请文明发言！)"
        :visible.sync="drawer"
        :direction="direction"
         >
      <div style=" position: fixed;width: 100%;height: 2em;top: 4em; " >
        <textarea rows="2em" v-model="content" :style="`background: #EED7B1;width:320px; border: #00A9F8 solid 2px;
         border-radius:10px 0px 0px 10px;padding-left: 10px;`"></textarea>
        <el-button @click="commentSent()"  class="custom-button" type="success" plain
                   :style="`height: 2.8em;width:52px;background: #9012ea;`">发送</el-button>
      </div>
      <!--撑起来-->
      <div style="width: 100%;height: 50px;top: 3em;"></div>
      <div style="padding-left: 120px">
        <img src="../../assets/img/plqu.png" style="width: 120px;height: 100px;">
      </div>
      <div class="comment" v-for="comment in comments" :key="comments.id">
        <span style="color: red">用户:</span><strong>{{comment.userName}}</strong>&nbsp;&nbsp;
        <span style="color: red">评论时间:</span><span>{{comment.operTime}}</span>
        <br/>
        <div disabled="disabled"  style="background-color: #EED7B1;border: #8484dc solid 2px;padding: 1px 4px">
         {{comment.content}}
        </div>
      </div>


    </el-drawer>


    <!-- 内容区 -->
    <div id="main_box" >

      <!--中间区域-->
      <div class="middle">

        <!--文章容器  文章列表开始-->
        <div class="recent-content" :style="`background-image: url('${imgback}'); background-size: cover;
        `">
          <!--标题-->
          <h2 style="text-align:center;font-size:26px;font-weight: bold">{{news.name}}</h2>
          <div style="text-align:center; font-size:14px;">
            发布时间:{{news.publishTime}} &nbsp;&nbsp;
            作者:{{news.writer}}

          </div>
          <div class="lista">
            <mavon-editor v-html="news.content" ref="md"
                          :style="`white-space: pre-wrap !important; word-wrap: break-word !important;padding: 10px;
                          background-image: url('${imgback}');font-weight: 550;color:${selectedColor};opacity: 0.8; background-size: 100%;`" />
          </div>

        </div>
      </div>
      <div style="clear: left;"></div>
      <!-- 底部友情链接,网站信息 -->
      <div class="main_bottom">
        <div class="main_bottom_link">
          <div class="main_bottom_link_title">友情链接</div>
          <div class="main_bottom_link_content">
            <a :href="link.url" v-for="(link,index) in links" :key="index">
              <div style="display: inline-block;text-align: center">
                <img :src= "servePath +link.picture" width="100" height="100">
                <br/>
                {{link.name}}
              </div>

            </a>
          </div>
        </div>
        <div class="main_bottom_info">
          © 2021 {{form.title}} 京公网安备 {{form.noteid}}号<br/>
          联系电话：{{form.phone}}<br/>
          公司名称：{{form.name}}  &nbsp;&nbsp;&nbsp;
          <router-link to="/login">管理员登录</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "newsDetail",
  data(){
    return{
      selectedColor:'',/*改变字体颜色*/
      t:1,
      imgback:'https://tse2-mm.cn.bing.net/th/id/OIP-C.s0gDepDDANfDoDejF07yHQHaEK?pid=ImgDet&rs=1',
      backColor:['https://tse2-mm.cn.bing.net/th/id/OIP-C.s0gDepDDANfDoDejF07yHQHaEK?pid=ImgDet&rs=1','https://pic.616pic.com/bg_w1180/00/01/68/ZM2oX1cbJv.jpg','https://image.meiye.art/pic_1628493284512',
        'https://image.meiye.art/pic_uxrqzjdd9gZYlDgtnKUmW?imageMogr2/thumbnail/1200x/interlace/1',
      'https://image.meiye.art/pic_1631448770416OccPdi_ee79gdz1eYX7u6?imageMogr2/thumbnail/1200x/interlace/1',
      'https://image.meiye.art/pic_1632645127972Pgnlrw1ex0O3yjktogllV?imageMogr2/thumbnail/1200x/interlace/1',
      'https://image.meiye.art/pic_yiAudM4jmyfdONH5A3VgV','https://image.meiye.art/pic_1628655930739',
        'https://image.meiye.art/Fq51CVDQoDSSDgNIhacEPYH8vqCX?imageMogr2/thumbnail/1200x/interlace/1'
      ,'https://image.meiye.art/pic_mXAojqVDN8fP7nirtUl_Y',
        'https://image.meiye.art/pic_tE2OcZ1YaMLctyFCJVbAq'],
      drawer: false,
      direction: 'rtl',
      servePath:'http://127.0.0.1:8088/',
      id:'',
      news:{},
      query:'',
      links:[],
      form:{
        logo:"",
        name:'',
        title:"",
        phone:'',
        address:"",
        noteid:''
      },
      dz:true,
      dzNum:0,
      pl:true,
      plNum:0,
      sc:true,
      scNum:0,
      userToken:'',
      imgUrl:'',
      userName:'',
      content:'',
      comments:[]
    }
  },methods:{
    findComments(){
      this.$http.get("newsDetail/newsDetailCtl/findComments?id="+this.id).then((resp)=>{
        this.comments=resp.data.data;
      })
    },
    commentSent(){
      if(this.userName!=null&&this.content.length>0) {/*【判断是否登录】*/
        /*需要用户ID（token），新闻id，新闻标题，评论内容*/
        this.$http.get("newsDetail/newsDetailCtl/commentSent?newsId=" + this.id + "&newsName=" + this.news.name + "&content=" + this.content).then((resp) => {
          if (resp.data.code == 200) {
            this.content = '';
            this.$message({
              showClose: true,
              message: '你已神评！~',
              type: 'success'
            });
            this.$router.go();
          }
        })
      }else if(this.content.length==0&&this.userName!=null){
        this.$message({
          showClose: true,
          message: '输入内容不能为空~',
          type: 'warning'
        });
      } else {
        this.$message({
          showClose: true,
          message: '请先登录再评论~',
          type: 'warning'
        });
      }

      this.findComments();
    },
    handleColorSelection(event) {
      // 处理颜色选择的逻辑
      const selectedColor = event.target.value;
      console.log("选定的颜色:", selectedColor);
      // 做其他处理...
    },
    changBack(n){
      if(n==1000){
        const randomNumber = Math.floor(Math.random() * 100) + 1;
        this.t= randomNumber%this.backColor.length;
        this.imgback=this.backColor[this.t];
      }else {
        this.imgback=this.backColor[this.t];
        if(n<0&&this.t<0){
          this.t=(this.backColor.length+n)%(this.backColor.length);
        }else {
          this.t=(this.t+n)%(this.backColor.length);
        }
      }


    },
    clickdz(){
      if(this.userName!=null){/*【判断是否登录】*/
        /*判断是否加减*/
        this.dzNum=this.dz?this.dzNum+1:this.dzNum-1;
        /*修改点赞 dz为true点赞，否则取消点赞*/
        this.$http.get("newsDetail/newsDetailCtl/updatelikeNum?id="+this.id+"&dz="+this.dz+"&newsName="+this.news.name).then((resp)=>{

        })
        /*标志逆转*/
        this.dz=!this.dz;

      }else {
        this.$message({
          showClose: true,
          message: '请先登录再点赞~',
          type: 'warning'
        });
      }


    },
    clicksc(){
      if(this.userName!=null){
      /*判断是否加减*/
      this.scNum=this.sc?this.scNum+1:this.scNum-1;
        /*修改收藏 sc为true收藏，否则取消收藏*/
        this.$http.get("newsDetail/newsDetailCtl/updateCollectionNum?id="+this.id+"&sc="+this.sc+"&newsName="+this.news.name).then((resp)=>{

        })
      /*标志逆转*/
      this.sc=!this.sc;
      }else {
        this.$message({
          showClose: true,
          message: '请先登录再收藏~',
          type: 'warning'
        });
      }
    },
    queryNews(){
      this.$router.push({path: '/index',query: {query: this.query}});
    },
    //连接
    getLink(){
      this.$http.get("index/indexCtl/link").then((resp) => {
        if (resp.data.code==200){
          this.links = resp.data.data;
        }
      })
    },
    //网页信息
    getSystem(){
      this.$http.get("index/indexCtl/System").then((resp) => {
        if (resp.data.code==200){
          this.form = resp.data.data;
          console.log(this.form);
        }
      })
    },


  },mounted() {
    this.id=this.$route.query.id;
    this.getLink();
    this.getSystem();
    this.userToken=sessionStorage.getItem('userToken');
    this.imgUrl=sessionStorage.getItem('imgUrl');
    this.userName=sessionStorage.getItem('name');
    /*查询点赞与收藏数量、评论数量*/
    this.$http.get("newsDetail/newsDetailCtl/findlikeCollectionNum?id="+this.id).then((resp)=>{
      if (resp.data.code==200){
        this.dzNum=resp.data.data[0];
        this.scNum=resp.data.data[1];
        this.plNum=resp.data.data[2];
      }
    })
    if(this.userName!=null){
      /*查询该用户是否已点赞、收藏*/
      this.$http.get("newsDetail/newsDetailCtl/isUserDzSc?id="+this.id).then((resp)=>{
        this.dz=resp.data.data[0]>0?false:true;
        this.sc=resp.data.data[1]>0?false:true;
        this.pl=resp.data.data[2]>0?false:true;
      })
    }
    this.$http.get("newsDetail/newsDetailCtl/findNewsByid?id="+this.id).then((resp) => {
      if (resp.data.code==200){
        this.news = resp.data.data;
        this.news.content=this.converter.makeHtml(resp.data.data.content);
      }
    });

  }
}
</script>

<style src="../../assets/css/detail.css" scoped>
.comment {
  display: block;
  margin-bottom: 10px;
}

.comment strong {
  font-weight: bold;
}

.comment span {
  color: #888;
  font-size: 14px;
}

.comment textarea {
  width: 100%;
  min-height: 100px;
  border: 1px solid #ccc; /* 边框样式 */
  border-radius: 5px; /* 边框圆角 */
  padding: 5px; /* 内边距 */
  resize: vertical; /* 可调整垂直尺寸 */
}
.custom-button:hover {
  background: #663399; /* 修改悬停时的背景颜色 */
  color: #ffffff; /* 修改悬停时的文字颜色 */
  /* 可以根据需要定义其他悬停效果 */
}
</style>